'use strict'
import React from 'react'
import style from './css.css'
import { observer, inject } from 'mobx-react'
import FailResult from './failResult'
import { View, Button } from '../../component'

@inject('room') @observer class Result extends React.Component {
  static propTypes = {
    room: PropTypes.object,
    tap: PropTypes.func,
    share: PropTypes.func,
    overGame: PropTypes.func
  }
  _handClose = this._handClose.bind(this)
  _handClose () {
    this.props.room.changeRoomState(0)
    this.props.overGame()
  }
  _renderResult () {
    const { resultState, dollDetail } = this.props.room
    if (resultState === -1) {
      return (
        <FailResult tap={ this.props.tap } handClose={ this._handClose } />
      )
    }
    else if (resultState === 1) {
      return (
        <View className={ style.successResult }>
          <View className={ style.resultImageLight }></View>
          <View style={{ backgroundImage: `url(${dollDetail.doll_pic_large})` }} className={style.resultImage}></View>
          <Button tap={() => { this._handClose(); this.props.share() }} tapClassName={style.shareBtnPress} className={ style.shareBtn}></Button>
          <Button tap={this._handClose} tapClassName={style.closePress } className={ style.close}></Button>
        </View>
      )
    }
  }
  render () {
    const { resultState } = this.props.room
    return (
      <View className={ resultState === 0 ? style.hide : style.resultBox}>
        {this._renderResult()}
      </View>
    )
  }
}

export default Result
